<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <h3 class="text-center text-info">成绩表</h3>
    <table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <!-- 遍历数据 -->
            <tr v-for="(item,index) in message" key:item.id :class="item.score>=90?'success':''">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.score}}</td>
                <td>
                    <span v-if="item.score>=90">优秀</span>
                    <span v-else-if="item.score>=80">良好</span>
                    <span v-else-if="item.score>=70">及格</span>
                    <span v-else="item.score<60">不及格</span>
                
               
                   
                </td>
                


            </tr>
        </thead>
        <tbody>

</div>

 <script src="./js/vue.js"></script>
 <script>
               const vm = new Vue({
                   el:'#app',
                 
                   data:{
                    score:80,
                      message:
                        [
{id: 1,name: '诸葛亮',sex: '男',score: 98},
{id: 2,name: '周瑜',sex: '男',score: 88},
{id: 3,name: '刘阿斗',sex: '男',score: 50},
{id: 4,name: '曹植',sex: '男',score: 90},
{id: 5,name: '张飞',sex: '男',score: 70},
{id: 6,name: '曹丕',sex: '男',score: 55}
]
                      
                   },
                  

               })
 </script>
    
</body>
</html>